<template>
    <view class="list">
        <view class="fixbg" :style="{ backgroundImage: `url(${playList.coverImgUrl})` }"></view>
        <music-head title="歌单" :showIcon="true" color="white"></music-head>
        <view class="container" v-show="!isLoading">
            <scroll-view scroll-y="true">
                <view class="list-head">
                    <view class="list-head-img">
                        <image :src="playList.coverImgUrl"></image>
                        <text class="iconfont iconyousanjiao">{{formatCount(playList.playCount)}}</text>
                    </view>
                    <view class="list-head-text">
                        <view>{{playList.name}}</view>
                        <view>
                            <image :src="playList.creator.avatarUrl"></image>
                            <text>{{playList.creator.nickname}}</text>
                        </view>
                        <view>
                            {{playList.description}}
                        </view>
                    </view>
                </view>
                <!-- #ifdef MP-WEIXIN -->
                <button class="list-share" open-type="share">
                    <text class="iconfont iconicon-"></text>
                    分享给微信好友
                </button>
                <!-- #endif -->
                
                <view class="list-music">
                    <view class="list-music-head">
                        <text class="iconfont iconbofang1"></text>
                        <text>播放全部</text>
                        <text>（共{{playList.trackCount}}首）</text>
                    </view>
                    
<!--                    <view class="list-music-item">
                        <view class="item-top">1</view>
                        <view class="item-song">
                            <view>
                                与我无关
                            </view>
                            <view>
                                <image src="../../static/dujia.png"></image>
                                <image src="../../static/sq.png"></image>
                                <view class="">
                                    阿瑞 - 与我无关
                                </view>
                            </view>
                        </view>
                        <text class="iconfont iconbofang"></text>
                    </view> -->
                                 
                    <view
                        class="list-music-item"
                        v-for="(item, idx) in playList.tracks"
                        :key="idx"
                        @tap="handleToDetail(item.id)"
                    >
                        <view class="item-top">{{idx + 1}}</view>
                        <view class="item-song">
                            <view>
                                {{item.name}}
                            </view>
                            <view>
                                <image
                                    v-if="privileges[idx].flag  > 60 && privileges[idx].flag  < 70"
                                    src="../../static/dujia.png"
                                ></image>
                                <image
                                    src="../../static/sq.png"
                                    v-if="privileges[idx].maxbr === 999000"
                                ></image>
                                <view>
                                    {{item.ar[0].name}} - {{item.name}}
                                </view>
                            </view>
                        </view>
                        <text class="iconfont iconbofang"></text>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    import musicHead from "../../components/music-head/music-head.vue";
    import {
        list
    } from "../../common/api.js";
    import { formatCount } from '../../common/utils.js'
    export default {
        components: {
            musicHead,
        },
        onLoad(options) {
            console.log("---options: ", options);
            uni.showLoading({
                title: '正在加载中，请稍后。。。。',
                mask: false
            });
            list(options.id).then((res) => {
                console.log("---list: ", res);
                if (res[1].data.code === 200) {
                    this.playList = res[1].data.playlist
                    this.privileges = res[1].data.privileges;
                    this.isLoading = false 
                    this.$store.commit('INIT_TOPLIST_IDX', this.playList.trackIds);
                    uni.hideLoading()
                    console.log('---res[1].data.playlist: ', res[1].data.playlist);
                }
            });
        },
        data() {
            return {
                playList: {
                    coverImgUrl: '',
                    creator: {
                        avatarUrl: '',
                    },
                    trackCount: '',
                },
                privileges: [],
                isLoading: true,
            };
        },
        methods: {
            formatCount,
            handleToDetail(songId) {
                uni.navigateTo({
                    url: '/pages/detail/detail?songId=' + songId,
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
    @import "../../common/common-mixins.scss";
    .list {
        width: 100%;
        height: 100%;
        background: #f5f5f5;

        &-head {
            display: flex;
            margin: 30rpx;

            &-img {
                width: 264rpx;
                height: 264rpx;
                flex: 0 0 264rpx;
                border-radius: 30rpx;
                overflow: hidden;
                position: relative;
                margin-right: 42rpx;

                image {
                    width: 100%;
                    height: 100%;
                }

                text {
                    position: absolute;
                    top: 8rpx;
                    right: 8rpx;
                    color: #fff;
                    font-size: 26rpx;
                }
            }

            &-text {
                flex: 1;
                color: #f0f2f7;
                overflow: hidden;

                view:nth-child(1) {
                    color: #fff;
                    font-size: 34rpx;
                }

                view:nth-child(2) {
                    display: flex;
                    margin: 20rpx 0;
                    font-size: 24rpx;
                    align-items: center;

                    image {
                        width: 54rpx;
                        height: 54rpx;
                        border-radius: 50%;
                        margin-right: 14rpx;
                    }
                }

                view:nth-child(3) {
                    line-height: 34rpx;
                    font-size: 22rpx;
                }
            }

        }

        &-share {
            width: 330rpx;
            height: 74rpx;
            margin: 0 auto;
            background: rgba(0, 0, 0, .4);
            border-radius: 37rpx;
            color: white;
            text-align: center;
            line-height: 74rpx;
            font-size: 28rpx;

            text {
                margin-left: 16rpx;
            }
        }
        
        &-music {
            background: white;
            border-radius: 57rpx;
            margin-top: 40rpx;
            overflow: hidden;
            
            &-head {
                height: 50rpx;
                margin: 30rpx 0 70rpx 22rpx;
                
                text:nth-child(1) {
                    height: 50rpx;
                    font-size: 50rpx;
                }
                text:nth-child(2) {
                    font-size: 30rpx;
                    margin: 0 10rpx 0 26rpx;
                }
                text:nth-child(3) {
                    font-size: 26rpx;
                    color: #b2b2b2;
                }
            }
            
            &-item {
                display: flex;
                margin: 0 32rpx 66rpx 46rpx;
                align-items: center;
                
                .item-top {
                    width: 58rpx;
                    color: #959595; 
                    font-size: 30rpx;
                    line-height: 30rpx;
                }
                .item-song {
                    flex: 1;
                    
                    view:nth-child(1) {
                        font-size: 28rpx;
                        color: black;
                        width: 70vw;
                        // white-space: nowrap;
                        // overflow: hidden;
                        // text-overflow: ellipsis;
                        @include ellipsisBasic(1);
                    }
                    view:nth-child(2) {
                        display: flex;
                        align-items: baseline;
                        font-size: 20rpx;
                        width: 70vw;
                        // border: 2px solid #0f0;
                        
                        image {
                            // border: 2px solid #f00;
                            width: 32rpx;
                            height: 20rpx;
                            margin-right: 5rpx;
                            overflow: hidden;
                        }
                        
                        view {
                            // width: calc(100% - 70rpx);
                            // border: 2px solid #f0f;
                            color: #c7c7c7;
                            font-size: 24rpx;
                            @include ellipsisBasic(1);
                        }
                    }
                }
                
                text {
                    font-size: 50rpx;
                    color: #c7c7c7;
                }
            }
        }
    }
</style>
